import React, { PureComponent } from 'react';
//import { FormattedMessage, formatMessage } from 'umi/locale';
import { Spin, Tag, Menu, Icon, Avatar, Tooltip, message, Col } from 'antd';
import moment from 'moment';
import groupBy from 'lodash/groupBy';
// import NoticeIcon from '@/components/NoticeIcon';
// import HeaderSearch from '@/components/HeaderSearch';
import HeaderDropdown from '@/components/HeaderDropdown';
import styles from './index.less';

export default class GlobalHeaderRight extends PureComponent {
  getNoticeData() {
    const { notices = [] } = this.props;
    if (notices.length === 0) {
      return {};
    }
    const newNotices = notices.map(notice => {
      const newNotice = { ...notice };
      if (newNotice.datetime) {
        newNotice.datetime = moment(notice.datetime).fromNow();
      }
      if (newNotice.id) {
        newNotice.key = newNotice.id;
      }
      if (newNotice.extra && newNotice.status) {
        const color = {
          todo: '',
          processing: 'blue',
          urgent: 'red',
          doing: 'gold',
        }[newNotice.status];
        newNotice.extra = (
          <Tag color={color} style={{ marginRight: 0 }}>
            {newNotice.extra}
          </Tag>
        );
      }
      return newNotice;
    });
    return groupBy(newNotices, 'type');
  }

  getUnreadData = noticeData => {
    const unreadMsg = {};
    Object.entries(noticeData).forEach(([key, value]) => {
      if (!unreadMsg[key]) {
        unreadMsg[key] = 0;
      }
      if (Array.isArray(value)) {
        unreadMsg[key] = value.filter(item => !item.read).length;
      }
    });
    return unreadMsg;
  };

  // changeReadState = clickedItem => {
  //   const { id } = clickedItem;
  //   const { dispatch } = this.props;
  //   dispatch({
  //     type: 'global/changeNoticeReadState',
  //     payload: id,
  //   });
  // };

  render() {
    const {
      // currentUser,
      // fetchingNotices,
      // onNoticeVisibleChange,
      onMenuClick,
      // onNoticeClear,
      theme,
      userInfo
    } = this.props;

    const menu = (
      <Menu className={styles.menu} selectedKeys={[]} onClick={onMenuClick}>
        <Menu.Item key="userCenter">
          <Icon type="setting" /><span>个人设置</span>
        </Menu.Item>
        {/*<Menu.Item key="userinfo">
          <Icon type="setting" /><span>个人设置</span>
        </Menu.Item>*/}
        <Menu.Divider/>
        <Menu.Item key="logout">
          <Icon type="logout"/><span>退出登录</span>
        </Menu.Item>
      </Menu>
    );
    // const noticeData = this.getNoticeData();
    // const unreadMsg = this.getUnreadData(noticeData);
    let className = styles.right;
    if (theme === 'dark') {
      className = `${styles.right}  ${styles.dark}`;
    }
    return (
      <div className={className}>
        {/*
        <HeaderSearch
          className={`${styles.action} ${styles.search}`}
          placeholder={'搜索'}
          dataSource={[]}
          onSearch={value => {
            console.log('input', value); // eslint-disable-line
          }}
          onPressEnter={value => {
            console.log('enter', value); // eslint-disable-line
          }}
        />
        <NoticeIcon count={5}
                    className={styles.action}>
          <NoticeIcon.Tab
            count={1}
            list={[]}
            title="通知"
            emptyText={'暂无消息'}
            emptyImage="https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg"
            showViewMore
          />
          <NoticeIcon.Tab
            count={0}
            list={[]}
            title="消息"
            emptyText={'暂无消息'}
            emptyImage="https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg"
            showViewMore
          />
          <NoticeIcon.Tab
            count={0}
            list={[]}
            title="待办"
            emptyText={'暂无消息'}
            emptyImage="https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg"
            showViewMore
          />
        </NoticeIcon>
        */}
        <HeaderDropdown overlay={menu} placement="bottomRight">
            <span className={`${styles.action} ${styles.account}`}>
              {
                userInfo.photo ? (
                  <Avatar
                    size="small"
                    className={styles.avatar}
                    src={userInfo.photo}
                    alt="avatar"
                  />
                ) : (
                  <Avatar size={'small'} className={styles.avatar} icon="user"/>
                )
              }
              <span
                className={styles.name}>{userInfo.name || userInfo.phone || userInfo.email || userInfo.code || '账号信息'}</span>
            </span>
        </HeaderDropdown>
        {/*{true ? (*/}
        {/*  */}
        {/*) : (*/}
        {/*  <Spin size="small" style={{ marginLeft: 8, marginRight: 8 }} />*/}
        {/*)}*/}

      </div>
    );
  }
}
